<template>
  <tab-bar>
    <tab-bar-item>
      <div slot="item-text" style="margin-top:1vh">
        <img src="~assets/image/common/logo.svg" alt="" />
      </div>
    </tab-bar-item>
    <tab-bar-item>
      <div slot="item-text"></div>
    </tab-bar-item>
    <tab-bar-item>
      <div slot="item-text"></div>
    </tab-bar-item>
    <tab-bar-item path="/home">
      <div slot="item-text">首页</div>
    </tab-bar-item>
    <tab-bar-item path="/charity">
      <div slot="item-text">公益捐赠</div>
    </tab-bar-item>
    <tab-bar-item path="/dream">
      <div slot="item-text">众筹</div>
    </tab-bar-item>
    <tab-bar-item>
      <div slot="item-text"></div>
    </tab-bar-item>
    <tab-bar-item>
      <div slot="item-text" @click="onClick">
        <img :src="serachImg" @mouseover="searchHover" @mouseout="searchOut" />
      </div>
    </tab-bar-item>
    <tab-bar-item  path="/profile" v-if="this.$store.state.isLogin">
      <div slot="item-text" style="float:left"><avatar/></div>
    </tab-bar-item>
    <tab-bar-item path="/login" v-if="!this.$store.state.isLogin">
      <div slot="item-text">登录</div>
    </tab-bar-item>
    <search v-show="isPrpout" :confirm="onConfirm" @cancel="onCancel" />
  </tab-bar>
</template>

<script>
import TabBar from "components/common/tabbar/TabBar";
import TabBarItem from "components/common/tabbar/TabBarItem";
import Search from "components/common/search/Search";
import Avatar from "components/common/navLogin/nav_login"
export default {
  name: "MainTaBar",
  data() {
    return {
      isPrpout: false,
      serachImg: require("assets/image/common/search.svg")
    };
  },
  created() {},
  methods: {
    // serach图标移入
    searchHover() {
      this.serachImg = require("assets/image/common/search_hover.svg");
    },
    //search图标移出
    searchOut() {
      this.serachImg = require("assets/image/common/search.svg");
    },
    // 弹出框是否显示
    onClick() {
      // 防止事件冒泡，阻止弹出框下面的内容滚动
      document.getElementsByClassName("popout")[0].style.cssText =
        "display:block";
      document.body.style.cssText = "overflow:hidden;height:100%;";
      this.isPrpout = true;
    },
    // 点击确定隐藏
    onConfirm(val) {
      console.log(val);
      this.isPrpout = false;
    },

    // 点击取消隐藏
    onCancel() {
      // 恢复弹出框下面内容可以滚动
      document.getElementsByClassName("popout")[0].style.cssText =
        "display:none";
      document.body.style.cssText = "overflow:auto";
      this.isPrpout = false;
    }
  },
  mounted() {},
  components: {
    TabBar,
    TabBarItem,
    Search,
    Avatar
  },
  watch: {},
  computed: {
    login() {
      if (
        sessionStorage.getItem("userToken") === undefined ||
        sessionStorage.getItem("userToken") === "" ||
        sessionStorage.getItem("userToken") === null
      ) {
        return true;
      } else {
      }
    }
  }
};
</script>

<style scoped lang="scss"></style>
